<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .father {
            width: 400px;
            height: 400px;
            background-color: purple;
        }

        .son {
            width: 200px;
            height: 200px;
            background-color: aqua;
        }
    </style>
</head>

<body>
    <a href="https://www.baidu.com">百度啦啦啦</a>
    <div class="father">
        <div class="son"></div>
    </div>
    <script>
        // 什么是默认行为呢？比如上面的a标签，你只要点了他，他必往href里面的地址跳

        // 什么是冒泡呢？你自己去看上一节的笔记，那么为什么要阻止他呢？因为很多时候我们触发son的点击事件的时候，并不想同时触发father的点击事件
        document.querySelector('a').addEventListener('click', (event) => {
            // 其实元素事件的回调函数里都会有个参数，我们通常命名为event也就是事件对象，它有一个api叫做preventDefault，调用它就可以规避一些元素的默认行为了，比如这里你再点击页面里的a标签，他就不会跳转了
            event.preventDefault();
            console.log('我就不跳，你打我呀');
        });

        document.querySelector('.son').addEventListener('click', (event) => {
            // event里也有一个api叫做stopPropagation，调用它就可以避免因为冒泡导致的父元素事件触发
            event.stopPropagation();
            console.log('谁是儿子');
        });
        document.querySelector('.father').addEventListener('click', (event) => {
            console.log('谁是爹');
        });
    </script>
</body>

</html>